/* 基本样式 */
.mybox {
  margin: 1rem;
  border: 1px solid #ff0000;
}

/* 压力盒子1 */
.flex1 {
  /* 
    display: flex;
    将元素显示模式切换为压力盒子
    它里面一级子元素会被强制压迫到一行上
  */
  display: flex;
}

.flex2 {
  display: flex;
  /* 
    justify-content,子元素的水平对齐方式
    space-between是分散对齐
  */
  justify-content: space-between;
}

.flex3 {
  display: flex;
  /* space-around空白区域要平均分配在每一个元素的两侧 */
  justify-content: space-around;
}

.flex4 {
  display: flex;
  /*center居中，flex-start靠左，flex-end靠右*/
  justify-content: center;
}

.flex5 {
  display: flex;
  /* 
    align-items是交叉轴（垂直）对齐方式
    center是居中,flex-start：靠上,flex-end：靠下
  */
  align-items: center;
}

.flex6 {
  display: flex;
}

.flex6 > div:first-child {
  flex: 3;
}

.flex6 > div:last-child {
  flex: 2;
}

/* 
  选择器a > 选择器b
  表示选择器a 里面的 第一级的选择器b
  例如: .abc > p
  表示 class为abc的元素里面的第一级的p元素
  选择器:first-child 表示匹配选择器的第一个元素
  选择器:last-child 表示匹配选择器的最后一个元素
  选择器:nth-child(n) 表示匹配选择器的第n个元素
  .flex6 > div:nth-child(2)
  表示class为flex6的一级子div元素的第二个
*/
.flex6 > div:nth-child(2) {
  /* 
    flex是压力布局一级子元素特有的样式
    值越大分配的空间越大，不论分配值是多少，都不会留下剩余的空间
    由于是占满空间，所以和水平对齐互斥
    如果只有一个元素拥有flex值，不论值的大小都会占满所有剩余空间
  */
  flex: 1;
}

.flex7 {
  display: flex;
}

.flex7 > div:nth-child(2) {
  flex: 1;
}
